<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/doctor/project/common.css"/>
		<link rel="stylesheet" href="../../../css/sale/orderDetail.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		.applyImgBox>div:first-child{
			line-height: 30px;
			border-bottom: 1px solid #E6E6E6;
		}
		.applyImgBox>.imgBox{
			padding: 5px 0;
		}
		.applyImgBox>.imgBox>img{
			width: 60px;
			height: 60px;
			margin:0 5px 5px 0 ;
		}
	</style>
	<body>
		<div id="orderDetail" v-cloak>
			<ul class="report">
				<li class="row1">
					<span class="name">{{message.patientName}}</span>
					<span class="sex">（{{message.patientSex==1?'女':'男'}} {{message.patientAge}}{{message.ageUnit}}）</span>
					<span class="right basic-color">
						<i class="icon iconfont icon-shijian-"></i>
						{{message.orderState+''|formatState}}
					</span>
				</li>
				<li class="row2">
					<span class="left">检验条形码：</span>
					<ul class="barcode">
						<li v-for="msg in message.specimenBarCode">{{msg}}</li>
					</ul>
					<span class="right">{{message.submitTime|replaceT}}</span>
				</li>
				<li class="row3">
					<ul>
						<li v-for="item in message.list">
							<span>{{item.name}}</span>
							<span class="right">
								<span>¥{{item.price}}</span>
							</span>
						</li>
					</ul>
				</li>
				<li class="row4">
					共 <span class="basic-color">{{message.projectNum}}</span> 个检验项目
					<span class="right">总金额：{{message.amount}}</span>
				</li>
				<li class="row5">
					<div @tap="readReport" v-if="message.reprotList&&message.reprotList.length>0">
						<i class="icon iconfont icon-pdf basic-color"></i>
						PDF报告下载
					</div>
					<!--<div @tap="getWX">
						<i class="icon iconfont icon-weixin basic-color"></i>
						发报告链接
					</div>-->
				</li>
			</ul>
			<div class="contact" @tap="contact(message.patientPhone)">
				<a :href="tel">
					<i class="icon iconfont icon-dianhua1 basic-color"></i>
					联系患者
				</a>
			</div>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font14_3">
					<span class="margin-right-6">{{message.doctorName}}</span><span class="padding0_16">医生</span>
				</div>
				<div class="border-bottom-1px font12_3">
					手机号：{{message.doctorPhone}}
				</div>
				<div class="border-bottom-1px font12_3">
					{{message.hospitalName}}
				</div>
				<div class="doctor-addr">
					<p class="font12_3">{{message.hospitalAddress}}</p>
				</div>
			</section>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font14_3">
					医学样本
				</div>
				<div class="border-bottom-1px">
					<div v-for="v in message.voList">
						<span class="font12_primary margin-right-8">{{v.samplingColor}}</span>
						<span class="font12_3"> *{{v.samplingNum}} </span>
					</div>
				</div>
				<div class="font12_3">
					采样日期： {{message.samplingTime|replaceT}}
				</div>
			</section>
			<section class="panel order-doctor padding0_16" v-if="message.orderState>=9&&message.orderState<=11">
				<div class="border-bottom-1px overflow font14_3">
					<span class="left">结算</span>
					<span class="right basic-color">已支付</span>
				</div>
				<div class="border-bottom-1px overflow font12_3">
					<span class="left">检验费</span>
					<span class="right">{{message.amount}}</span>
				</div>
				<div class="border-bottom-1px overflow font12_3">
					<span class="left">客户应付</span>
					<span class="right">{{message.actualAmount}}</span>
				</div>
				<div class="overflow font12_3">
					<span class="left">客户已付</span>
					<span class="right">{{message.settleAmount}}</span>
				</div>
			</section>
			<section class="panel order-doctor padding0_16">
				<div class="border-bottom-1px font12_3 applyImgBox">
					<div>
						<span>申请单</span>
					</div>
					<div class="imgBox">
						<img :src="appImg" v-for="(appImg,index) in appImgList" :key="index" @tap="lookImg(appImg)">
					</div>
				</div>
			</section>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script src="../../../js/cmms.js?time=222"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script type="text/javascript">
			new Vue({
				el:"#orderDetail",
				data:{
					showModel:false,//显示 弹出框
					orderId:'',
					specimenBarCode:'',//检验条形码
					message:[],
//					newVoList:[],
					urlArr:[],
					tel:'',
					shareUrl:'',
					abnormalRes:[],
					isTip:true,
					appImgList:[]
				},
				mounted(){
//					var vConsole = new VConsole();
					this.init();
					this.getUrl();
					this.getPages();
				},
				methods:{
					init(){
						/*接口配置*/
		    			AT.muiAjax('/partner-sale/partnerSale/wxConfig','post',{url:location.href.split('#')[0]},function(res){
							wx.config({
//								debug: true,
								appId:res.appId,
								timestamp:res.timestamp,
								nonceStr:res.nonceStr,
								signature:res.signature,
								jsApiList:['previewImage','updateAppMessageShareData']
							});
						});
						this.shareUrl=location.href;
					},
					getUrl(){
						let _this=this;
						var url = location.search; //获取url中"?"符后的字串    
						var theRequest = new Object();  
//						console.log(url);
					   	if (url.indexOf("?") != -1) {   
					      var str = url.substr(1);  
//					      console.log(str);
					      strs = str.split("&");  
					      for(var i = 0; i < strs.length; i ++) {   
					         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
					      } 
					   	}   
					   	console.log(theRequest);
					   	_this.orderId = theRequest.id;
					   	console.log(_this.orderId);
//					   	_this.specimenBarCode = theRequest.specimenBarCode;
					},
					getPages(){
						let _this=this;
						/*订单ID查报告详情*/
						AT.muiAjax('/partner-sale/order/getOrderDetailsById','post',{
							id:_this.orderId
						},function(res){
							console.log(res);
							_this.message=res;
							_this.tel='tel:'+res.patientPhone;
							if(res.orderApplyAttachmentIds){
								let arr = [];
								for(let imgId of res.orderApplyAttachmentIds){
									arr.push(_this.getImgSrc(imgId));
								}
								_this.appImgList = arr;
							}
						});
					},
					//获取单张图片地址
					getImgSrc(attachId){
						let baseURL = AT.baseUrl;
						return `${baseURL}/common/common/downLoadFile?attachId=${attachId}&type=0`
					},
					/*调用微信接口展示图片*/
					getImg(){
						let _this=this;
						wx.previewImage({
							current: _this.urlArr[0], // 当前显示图片的http链接
							urls: _this.urlArr// 需要预览的图片http链接列表
						});
					},
					lookImg(img){
						let _this=this;
						wx.previewImage({
							current: img, // 当前显示图片的http链接
							urls: _this.appImgList// 需要预览的图片http链接列表
						});
					}
				}
			})
		</script>
	</body>

</html>